﻿@namespace MatBlazor
@typeparam TValue
@inherits BaseMatSlider<TValue>


<div @ref="Ref" class="@ClassMapper.AsString()" style="@StyleMapper.AsString()" tabindex="0" role="slider"
     aria-valuemin="@ValueMin" aria-valuemax="@ValueMax" aria-valuenow="@Value"
     data-step="@(EnableStep ? Step?.ToString() : null)" aria-label="@Label" aria-disabled="@Disabled"
     @attributes="Attributes" Id="@Id">
    <div class="mdc-slider__track-container">
        <div class="mdc-slider__track"></div>
        @if (Discrete && Markers)
        {
            <div class="mdc-slider__track-marker-container"
                 style="@MarkerStyle">
            </div>
        }
    </div>

    <div class="mdc-slider__thumb-container">
        @if (Pin)
        {
            <div class="mdc-slider__pin">
                <span class="mdc-slider__pin-value-marker">@Value</span>
            </div>
        }
        <svg class="mdc-slider__thumb" width="21" height="21">
            <circle cx="10.5" cy="10.5" r="7.875"></circle>
        </svg>
        <div class="mdc-slider__focus-ring"></div>
    </div>
</div>

